import type { FC } from "react";
import { useDebounceFn } from "ahooks";
import { produce } from "immer";
import contentStyle from '../index.module.scss'
import styles from './index.module.scss'
import { useCustomizationStore, usePersonalDetailsStore } from "@/store/createStore";
import { updateCustomization } from "@/service";

interface IndexProps {

}

const Index: FC<IndexProps> = () => {
  const { customization, updateColumnWidth, addCustomization } = useCustomizationStore()
  const { personalDetails } = usePersonalDetailsStore(state => state, (o, n) => {
    return o.personalDetails.id === n.personalDetails.id
  })
  function change(data) {
    updateColumnWidth(data.layout.colWidthsFromDetails)
  }
  const updateValue = (params) => {
    return updateCustomization({
      ...params,
    })
  }
  const { run } = useDebounceFn(
    (data) => {
      updateValue({
        updates: [
          {
            path: `layout.colWidthsFromDetails.${customization.layout.detailsPosition}.leftWidth`,
            value: data.layout.colWidthsFromDetails[customization.layout.detailsPosition].leftWidth,
          },
          {
            path: `layout.colWidthsFromDetails.${customization.layout.detailsPosition}.rightWidth`,
            value: data.layout.colWidthsFromDetails[customization.layout.detailsPosition].rightWidth,
          },
        ],
        id: customization.id,
      })
    },
    {
      wait: 1000,
    },
  )
  if (customization.layout.colsFromDetails[customization.layout.detailsPosition] !== 'one') {
    return <>
      <h3 className={contentStyle.subtitle}>
      左右占比
      </h3>
      <div className={styles.columnWidth}>
        <div
          className={styles.column}
          onClick={async () => {
            if (customization.layout.colWidthsFromDetails[customization.layout.detailsPosition].leftWidth >= 80)
              return

            const data = produce(customization, (draft) => {
              draft.layout.colWidthsFromDetails[customization.layout.detailsPosition].leftWidth += 1
              draft.layout.colWidthsFromDetails[customization.layout.detailsPosition].rightWidth -= 1
            })
            change(data)

            if (customization.id) {
              run(data)
            }
            else if (personalDetails.id) {
              addCustomization(personalDetails.id)
            }
          }}
        >
        +
          {
            customization.layout.colWidthsFromDetails[
              customization.layout.detailsPosition
            ].leftWidth
          }
        </div>
        <div
          className={styles.column}
          onClick={() => {
            if (customization.layout.colWidthsFromDetails[customization.layout.detailsPosition].rightWidth >= 80)
              return
            const data = produce(customization, (draft) => {
              draft.layout.colWidthsFromDetails[customization.layout.detailsPosition].leftWidth -= 1
              draft.layout.colWidthsFromDetails[customization.layout.detailsPosition].rightWidth += 1
            })
            change(data)

            if (customization.id) {
              run(data)
            }
            else if (personalDetails.id) {
              addCustomization(personalDetails.id)
            }
          }}
        >
        +
          {
            customization.layout.colWidthsFromDetails[
              customization.layout.detailsPosition
            ].rightWidth
          }
        </div>
      </div>
    </>
  }
  return null
}

export default Index
